<!--
* @author wn
* @date 2023/03/01 15:49:42
* @description: 登陆表单
!-->
<template>
	<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
		<!--  label="Activity name"-->
		<a-form-item v-bind="validateInfos.username">
			<a-input
				:class="theme ? '' : 'dark-style'"
				v-model:value.trim="model.username"
				size="large"
				placeholder="请输入帐户名"
				@blur="
					validate('username', { trigger: ['change', 'blur'] }).catch(() => {})
				"
			>
				<template #prefix>
					<Icon :icon="user" class="icon-dark" />
				</template>
			</a-input>
		</a-form-item>
		<a-form-item v-bind="validateInfos.password">
			<a-input
				:class="theme ? '' : 'dark-style'"
				v-model:value.trim="model.password"
				type="password"
				size="large"
				autocomplete="false"
				placeholder="请输入密码"
			>
				<template #prefix>
					<Icon :icon="lock" class="icon-dark" />
				</template>
			</a-input>
		</a-form-item>
		<a-row :gutter="10">
			<a-col :span="17">
				<a-form-item v-bind="validateInfos.captcha">
					<a-input
						:class="theme ? '' : 'dark-style'"
						v-model:value.trim="model.captcha"
						size="large"
						placeholder="请输入验证码"
					>
						<template #prefix>
							<Icon :icon="smile" class="icon-dark" />
						</template>
					</a-input>
				</a-form-item>
			</a-col>
			<a-col :span="6" style="text-align: right">
				<!-- 图片验证组件 -->
				<img
					v-if="requestCodeSuccess"
					style="margin-top: 2px"
					:src="randCodeImage"
					@click="handleChangeCheckCode"
				/>
				<img
					v-else
					style="margin-top: 2px"
					src="@/assets/checkcode.png"
					@click="handleChangeCheckCode"
				/>
			</a-col>
		</a-row>
	</a-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Icon } from '@/antd/icons'

import { Form } from 'ant-design-vue'
import { getRandomImage } from '@/api/login'
import { useUser } from '@/stores/modules/userStore'

const useForm = Form.useForm
// props
defineProps({
	theme: {
		type: String,
		default: 'day',
	},
})

// 图标
const user = ref('UserOutlined')
const smile = ref('SmileOutlined')
const lock = ref('LockOutlined')

// 图片验证码
const requestCodeSuccess = ref(false)
const randCodeImage = ref('')
const currdatetime = ref('')

// 用户表单数据
const model = reactive({
	username: 'ic_demo01',
	password: 'Demo01!',
	captcha: '',
	checkKey: '',
})

// 判断登录类型
const loginType = ref(0)
const handleUsernameOrEmail = (rule, value) => {
	const regex =
		/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
	if (regex.test(value)) {
		loginType.value = 0
	} else {
		loginType.value = 1
	}
	return Promise.resolve('校验通过')
}

// 校验规则
const rulesRef = reactive({
	// 自定义触发时机 与模版 trigger 必须一致 默认 change
	username: [
		{ required: true, message: '请输入用户名!', trigger: ['change', 'blur'] },
		{ validator: handleUsernameOrEmail },
	],
	password: [
		{
			required: true,
			message: '请输入密码!',
		},
		{ min: 3, max: 8, message: '长度必须 3 到 8' },
	],
	captcha: [
		{
			required: true,
			message: '请输入验证码!',
		},
	],
})

const { /* resetFields, */ validate, validateInfos } = useForm(model, rulesRef)

// 刷新图片验证码 created 执行  点击图片执行
onMounted(() => handleChangeCheckCode())
const handleChangeCheckCode = async () => {
	currdatetime.value = new Date().getTime()
	model.captcha = ''
	const { success, result } = await getRandomImage(currdatetime.value).catch(
		() => (requestCodeSuccess.value = false)
	)
	if (success) {
		randCodeImage.value = result
		requestCodeSuccess.value = true
	} else {
		requestCodeSuccess.value = false
	}
}

// 定义 emit
const emit = defineEmits(['requestSuccess'])
// 登陆 userStore--Login
const { Login } = useUser()
const handleLogin = async rememberMe => {
	// 校验
	await validate()
	model.remember_me = rememberMe
	model.checkKey = currdatetime.value
	// 提示错误                             =====================
	const response = await Login(model).catch(() => Promise.reject('登陆失败'))
	// 发射自定义事件
	emit('requestSuccess', response)
	return '登陆成功'
}
// 暴露出去
defineExpose({ handleLogin })
</script>
<style scoped lang="less">
.dark-style > .ant-input {
	background-color: #232a3b !important;
	color: #c8d0d8;
	animation: slowDisplay 1s ease;
	animation-fill-mode: forwards;
	border: none;
}

@keyframes slowDisplay {
	0% {
		background-color: #fff !important;
	}
	100% {
		background-color: #232a3b !important;
	}
}

.icon-dark {
	color: #c8d0d8 !important;
}
</style>
